<template>
  <div>
    <Top></Top>
    <TopNav></TopNav>
    <BorderTitle>推荐歌单</BorderTitle>
    <ul class="songlist" v-if="songList.length>0">
      <ListItem v-for = "sl in songList" :key="sl.id" :item="sl"></ListItem>
    </ul>
    <Loading v-if="songList.length==0"></Loading>
    <BorderTitle>最新音乐</BorderTitle>
    <ul class="newsong" v-if="newSong.length>0">
      <li v-for="(s,index) in newSong" :key="s.id">
        <SongItem :item="s" @add-list="addMusicList(newSong)">{{index+1}}</SongItem>
      </li>
    </ul>
    <Loading v-if="newSong.length==0"></Loading>
  </div>
</template>
<script>
import BorderTitle from '@/components/BorderTitle';
import ListItem from '@/components/ListItem';
import SongItem from '@/components/SongItem';
import Loading from '@/components/Loading';
import Top from '@/components/Top';
import TopNav from '@/components/TopNav';
export default {
  name: "recommend",
  components:{
    BorderTitle,
    ListItem,
    SongItem,
    Loading,
    Top,
    TopNav
  },
  data(){
    return {
      songList:[],
      newSong: []
    }

  },
  created(){
    this.$http.get('/personalized?limit=9').then(data=>{
      this.songList = data.data.result;
    })

    this.$http.get('/personalized/newsong?limit=10').then(data=>{

      this.newSong = data.data.result;
    })
  },
  methods:{
    addMusicList(newSong){//把当前最新的歌曲列表全部加入我的播放清单
      // this.$root.musicStore.musicList=this.$root.musicStore.musicList.concat(newSong);
      let newArr=this.$root.musicStore.musicList;//取出当前的播放列表
      newSong.map(d => {//处理每一条newSong的音乐
        let find=false;
        for(let n of newArr){
          if(n.id==d.id){//找到了当前音乐在歌单内存在就不加入歌单
            find=true;
            break;
          }
        }
        if(!find) newArr.push(d)//如果当前音乐在newArr里面未找到则加入newArr
      });
      this.$root.musicStore.musicList = newArr;
    }
  },
}
</script>
<style lang="less" scoped>
.songlist{
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  li{
    width: 33%;
  }
}
.newsong{
  padding-left: 10px;
}
</style>